<!DOCTYPE html>

<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>密码控件-PCH5最新</title>
    <link rel="stylesheet" type="text/css" href="https://mpay-static.oss-cn-hangzhou.aliyuncs.com/html/lib/state-secret/microdone.css">
    <script type="text/javascript" src="https://mpay-static.oss-cn-hangzhou.aliyuncs.com/html/lib/state-secret/jquery.min.js"></script>
    <script type="text/javascript" src="https://mpay-static.oss-cn-hangzhou.aliyuncs.com/html/lib/state-secret/microdone-220322.js"></script>
    <style>
        .ipt_pwd{
            width: 245px;
            height: 37px;
            position: relative;
            border: 1px solid #333;
            margin-right: 20px;
        }
    </style>
</head>

<body>
<div>
    <p>密码控件使用说明：</p>
    <p>1、建议先单独调试我们的提供的Demo，调试完毕后再集成到贵司的系统中</p>
    <p>2、调试时，建议使用chrome浏览器，打开浏览器开发者工具，因为加密后的密文会打印再浏览器开发者工具的Console中</p>
    <p>3、这个demo只是主要是演示密码控件的一些方法如何使用，具体的功能，如何去获取用户输入密码后加密生成的密文，然后把这个密文提供给后端API接口使用，options这个变量要从后端的“随机因子获取”接口中获取</p>
    <p>4、获取到的密文和random_key是有关系的（加密时用到了random_key，所以需要传给后端解密，它们是配对的），需要把这两个值都一起传递给后端，而且这两个值都是一次性的，一次性的意思就是，当后端接口使用过这两个值，那就不能再使用了，需要重新使用“随机因子获取”接口获取前端需要的options变量，然后重新生成密文，如果options一直没有被使用，有效期为10分钟</p>
    <p>5、可以通过对比获取密文的hash值判断用户输入的两次密码是否相同</p>
    <p></p>
</div><br/><br/><br/>


<!-- HTML的标签用到的属性尽量不要动，如有需要调整样式，可自行增加class即可 -->
<!-- 整个div会默认撑满父容器宽高，继承父容器颜色字体大小，点击元素会弹出密码键盘 -->
<div style="border: 1px solid #ccc; width: 300px;">
    密&nbsp;码：
    <div id="ipt_pwd2" class="ipt_pwd">
        <span id="LOGPASS2_SHOW">请输入密码</span>
        <input id="LOGPASS2" class="default input_search" type="password" disabled="disabled" />
        <div id="keyboardBtn2" class="ipt_pwd_rjp default"></div>
    </div><br/>
    确认密码：
    <div id="ipt_pwd3" class="ipt_pwd">
        <span id="LOGPASS3_SHOW">请确认密码</span>
        <input id="LOGPASS3" class="default input_search" type="password" disabled="disabled" />
        <div id="keyboardBtn3" class="ipt_pwd_rjp default"></div>
    </div>
</div>

<button id="get-password">获取密码</button>
<script th:inline="javascript">
    $(function() {
        // 初始化密码控件
        function initPassword(options = {}) {
            // eslint-disable-next-line
            const passowrd = new showKeyBord({
                'png': '//mpay-static.oss-cn-hangzhou.aliyuncs.com/html/lib/state-secret/img', // 图片路径，用这个就行了，也可以下载到本地
                'click_objId': '#keyboardBtn2', // 触发显示键盘的Dom节点Id
                'regExp1': '[\\S\\s]', // 输入过程限制的正则，不匹配正则的字符不让输入
                'regExp2': '^[\\S\\s]{6,12}$', // 输入完成后的正则，与getValid()对应，判断输入值是否匹配该正则
                'Input_texId': '#LOGPASS2', // 接收内容的Dom节点Id
                'parent_objId': '#ipt_pwd2', // 将键盘插入到何处的Dom节点Id
                'placeholderId': '#LOGPASS2_SHOW', // span标签的id，该span用于模拟Input_texId的placeholder
                'len': '12', // 表示最大允许输入多少个字符[可以不传递]
                'keyBordLeft': '',
                'keyBordTop': '',
                'chaosMode': 0, // 混乱模式,0:无混乱;1:打开时乱一次;2:每输入一个字符乱一次,默认值0
                'clickStatus': 0, // 按键状态,0:鼠标划过、悬浮时按键无变化;1:鼠标划过、悬浮时按键的颜色变化,默认值0
                'titlefont': '安全支付输入',
                'backfont': '退 格',
                'capsfont': '切换大/小写',
                'surefont': '确定',
                'isen': false,
                'callBack': () => {}, // 密码校验成功回调
                'errorCallBack': () => {}, // 密码校验失败回调
                'rsaPublicKey': options.rsa_public_content, // RSA加密必须参数，国密加密可不要
                'sm2KeyHex': options.sm2_key_hex, // 国密加密必须参数，RSA加密可不要
                'license': options.license, // 必须参数
            })
            passowrd.initOptions()
            return passowrd
        }

        function initPassword2(options = {}) {
            // eslint-disable-next-line
            const passowrd2 = new showKeyBord({
                'png': '//mpay-static.oss-cn-hangzhou.aliyuncs.com/html/lib/state-secret/img', // 图片路径，用这个就行了，也可以下载到本地
                'click_objId': '#keyboardBtn3', // 触发显示键盘的Dom节点Id
                'regExp1': '[\\S\\s]', // 输入过程限制的正则，不匹配正则的字符不让输入
                'regExp2': '^[\\S\\s]{6,12}$', // 输入完成后的正则，与getValid()对应，判断输入值是否匹配该正则
                'Input_texId': '#LOGPASS3', // 接收内容的Dom节点Id
                'parent_objId': '#ipt_pwd3', // 将键盘插入到何处的Dom节点Id
                'placeholderId': '#LOGPASS3_SHOW', // span标签的id，该span用于模拟Input_texId的placeholder
                'len': '12', // 表示最大允许输入多少个字符[可以不传递]
                'keyBordLeft': '',
                'keyBordTop': '',
                'chaosMode': 0, // 混乱模式,0:无混乱;1:打开时乱一次;2:每输入一个字符乱一次,默认值0
                'clickStatus': 0, // 按键状态,0:鼠标划过、悬浮时按键无变化;1:鼠标划过、悬浮时按键的颜色变化,默认值0
                'titlefont': '安全支付输入',
                'backfont': '退 格',
                'capsfont': '切换大/小写',
                'surefont': '确定',
                'isen': false,
                'callBack': () => {}, // 密码校验成功回调
                'errorCallBack': () => {}, // 密码校验失败回调
                'rsaPublicKey': options.rsa_public_content, // RSA加密必须参数，国密加密可不要
                'sm2KeyHex': options.sm2_key_hex, // 国密加密必须参数，RSA加密可不要
                'license': options.license, // 必须参数
            })
            passowrd2.initOptions()
            return passowrd2
        }

        // options需要从后端获取，options有效期10分钟，生成密文后传输给后端接口使用后，options要重新获取。
        // 随机因子，必须包含sm2_key_hex、license、random_value
        var options = JSON.parse([[${options}]]);

        let passwordInstance = initPassword(options)
        let passwordInstance2 = initPassword2(options)

        $('#get-password').click(function() {
            // 获取国密密文
            passwordInstance.setRandKey(options.random_value) // 先设置随机key
            const password = passwordInstance.getOutputSM() // 国密加密密码
            const rsaPassword = passwordInstance.getOutput() // RSA加密密码
            // hash用于比对密码是否一致，同一个密码加密密文可能不同，hash一定相同
            const hash = passwordInstance.getHash() // RSA加密密码
            console.log("国密密码是", password)
            console.log("该密文对应的random_key是", options.random_key)
            console.log("支付密码的HASH是", hash)
            const hash2 = passwordInstance2.getHash() // RSA加密密码
            console.log("确认密码的HASH是", hash2)
            // // 清空密码框
            // passwordInstance.clearPWD()

            // 其他API请参考文档
        })
    })
</script>
</body>

</html>